<!-- eslint-disable vue/no-mutating-props -->
<!--
 * @Author: C.
 * @Date: 2023-12-12 18:38:19
-->
<template>
  <view class="input-wrapper" @click.stop="inputClick">
    <Input :model-value="modelValue" placeholder="请输入" type="select">
      <template #suffix>
        <Icon name="down" :class="openPicker ? 'm-turn-over' : ''" />
      </template>
    </Input>
    <!-- input 阻碍了点击事件 使用mask覆盖-->
    <view class="input-mask" />
  </view>
  <DateTimePicker
    v-bind="$attrs"
    v-model:open="openPicker"
    :model-value="modelValue"
    style="z-index: 20091"
    @confirm="confirm"
    @close="close"
  />
</template>
<script lang="ts" setup>
// ----------------------------- 第三方引入 -----------------------------
import { computed, ref } from 'vue'

// ----------------------------- hooks -----------------------------

// ----------------------------- 组件 -----------------------------
import DateTimePicker from '@tuniao/tnui-vue3-uniapp/components/date-time-picker/src/date-time-picker.vue'
import Input from '@tuniao/tnui-vue3-uniapp/components/input/src/input.vue'
import Icon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
// ----------------------------- 其他引入 -----------------------------

const props = defineProps({
  modelValue: {
    type: [String, Number, Boolean],
  },
  options: {
    type: Array as PropType<Recordable[]>,
    default: () => [],
  },
})
const emits = defineEmits(['update:modelValue'])
//----------------------------- 变量声明区 -----------------------------
const openPicker = ref(false)
// ----------------------------- hooks使用区 -----------------------------

// ----------------------------- 钩子函数区 -----------------------------

//  ----------------------------- 自定义方法区 -----------------------------
function confirm(value: any) {
  // console.log(value)

  emits('update:modelValue', value)
}
function inputClick() {
  // console.log('click')

  openPicker.value = true
}
function close() {
  openPicker.value = false
}
</script>
<style lang="scss" scoped>
.input-wrapper {
  position: relative;
  .input-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    /* background-color: #fd9e9e; */
    top: 0;
  }
}
</style>
